<div class="container containerAnimate" ng-class="{viewerOpen: $root.viewerOpen, letterIconViewerOpen: $root.letterIconViewerOpen}" >
  <div class="icons" 
    ng-class="{iconsAnimateIconToAssignA: animateIconToAssign == 'A', iconsAnimateIconToAssignB: animateIconToAssign == 'B'}">
    <div class="logo" ui-sref="home">
      <div class="C icon" ng-class="{selected: 'C' == selectedIcon.classNames}"></div>
      <div class="S icon" ng-class="{selected: 'S' == selectedIcon.classNames}"></div>
      <div class="S icon" ng-class="{selected: 'S' == selectedIcon.classNames}"></div>
      <div class="I icon" ng-class="{selected: 'I' == selectedIcon.classNames}"></div>
      <div class="C icon" ng-class="{selected: 'C' == selectedIcon.classNames}"></div>
      <div class="O icon" ng-class="{selected: 'O' == selectedIcon.classNames}"></div>
      <div class="N icon" ng-class="{selected: 'N' == selectedIcon.classNames}"></div>
      <div class="animateLogo"> 
        <div class="a-s icon"></div>
        <div class="n-s icon"></div>
        <div class="i-s icon"></div>
        <div class="m-s icon"></div>
        <div class="a-s icon"></div>
        <div class="t-s icon"></div>
        <div class="e-s icon"></div>
      </div>
    </div>
    <form class="searchWrapper">
        <input required type="text" ng-model="searchText" class="search" placeholder="">
        <div class="search icon"></div>
        <button class="close icon" type="reset" ng-click="searchText=''"></button>
    </form>
    <a class="iconWrapper" 
       ng-class="{selectedAnimateIconA: icon.classNames == animateIconA.classNames, selectedAnimateIconB: icon.classNames == animateIconB.classNames}"
       ng-click="iconAnimateClick(icon)"
       ng-repeat-start="icon in icons | filter: searchText | filter: {'style': '!letter'} | orderBy: 'style'">
      <div ng-class="icon.classNames" class="icon">
        <i ng-if="icon.htmlChildMarkup"></i>
      </div>
      <div class="iconMarker A"></div>
      <div class="iconMarker B"></div>
    </a> 
    <i ng-repeat-end></i>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>
    <div class="iconWrapper iconWrapperHidden"></div>

    <!-- <div ng-include="'partials/icons.html'"></div> -->
    
    <div class="info">
      adding more icons soon, check out the full CSS ICON collection of 512 icons <a href="/old">here</a>
    </div>

    <div class="about">
      <a href="https://youtu.be/ZOiRwXOIsx4" target="_blank" class="youtube"><i></i>Introducing<br>CSS ICON (video)</a>
      <a href="https://wentin.co" target="_blank" class="me"><i></i>a side project<br>by wentin</a>
      <a href="https://github.com/wentin/cssicon" target="_blank" class="github"><i></i>check it out<br>on github</a>
      <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A//cssicon.space/" target="_blank" class="facebook"><i></i>share it on<br>facebook</a>
      <a href="https://twitter.com/home?status=http%3A//cssicon.space/%20CSS%20ICON%3A%20a%20set%20of%20icons%20made%20by%20pure%20css%20via%20%40DesignJokes%20%23css%20%23cssicon" target="_blank" class="twitter"><i></i>share it on<br>twitter</a>
    </div>
  </div>
  <ui-view></ui-view>
</div>
